<template>
  <div class="equipment-main">
    <div class="menu-container">
      <div @click="handleMenu">
        <div v-for="(v, k) in menuMap" :key="k" class="menu-item pointer" :data-menu="k" :class="{ 'is-active': activeMenu === k }">{{ v }}</div>
      </div>
    </div>
    <div class="right-container">
      <UserInfo v-if="activeMenu === 'userInfo'" />
      <PasswordForm v-if="activeMenu === 'passwordForm'" />
    </div>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo'
import PasswordForm from './components/PasswordForm'
import { mapGetters } from 'vuex'

export default {
  components: {
    UserInfo,
    PasswordForm
  },
  data() {
    return {
      // 配置
      menuMap: {
        userInfo: '个人信息',
        passwordForm: '密码修改'
      },
      // 状态
      // 数据
      activeMenu: 'userInfo',

      form_disabled: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {},
  beforeCreate() {},
  created() {
    // 设置修改权限
    const source = this.userInfo.source
    if (source == '0') {
      this.form_disabled = false
    } else if (source == '1') {
      this.form_disabled = true
      this.menuMap = {
        userInfo: '个人信息'
      }
    }
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  update() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    /**
		 * 数据组
		 */
    /**
		 * 按钮组
		 */
    // 选择菜单
    handleMenu(e) {
      this.activeMenu = e.target.dataset.menu || this.activeMenu
    }
    /**
		 * 状态组
		 */
    /**
		 * 方法组
		 */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.equipment-main {
	height: 100%;
}

/*菜单容器*/
.menu-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 100%;
	padding-right: 20px;
	border-right: 2px solid #f5f5f5;

	.menu-item {
		height: 36px;
		margin-bottom: 10px;
		padding: 0 20px;
		line-height: 36px;
		font-size: 14px;
		color: #303133;
		border-radius: 10px;

		&:not(.is-active) {
			&:hover {
				color: #303133;
				background-color: $waiting;
			}
		}
	}

	.is-active {
		color: #fff;
		background-color: $primary;
	}
}

/*右边容器*/
.right-container {
	padding-left: 170px;
}
</style>
